Improve UI components with z-index layering, enhanced dialogs, and accessibility fixes - #800

Summary & Motivation

Establish consistent z-index layering system to fix toast visibility issues where toasts appeared behind blurred modal dialogs. The layering system standardizes z-index values across components: modals (z-90/z-100), side panes (z-70), side menu (z-60/z-80), and toasts (z-[150]).

• Consolidate modal-dialog AI rules into frontend.md with streamlined example showing Dialog render prop pattern, onClick exception for close buttons, and correct component usage
• Replace arbitrary dialog width classes (sm:max-w-lg) with design system tokens (sm:w-dialog-md, sm:w-dialog-lg)
• Redesign change user role dialog with radio button layout, user avatar display, and clear role permission descriptions
• Move antiforgery token to import.meta for consistent access across codebase
• Enable TanStack Router auto code splitting for improved performance
• Add hero CTAs to landing page that adapt based on authentication state
• Make footer social links open in new tabs with security attributes

Downstream projects

Review custom modal overlays and floating panels in your-self-contained-system for z-index conflicts. Update any custom overlays to use appropriate z-index values below modals (z-90) to prevent stacking issues.

Checklist

• I have added tests, or done manual regression tests
• I have updated the documentation, if necessary